<template>
  <div id="page-login">
    <div class="content">
      <div class="form-box">
        <header>
          <div>
            <img src="//cdn.itdashu.com/image/login-logo.png">
          </div>
          <h1>登录</h1>
          <div class="description">
            使用您的管理账号
          </div>
        </header>

        <i-form ref="password-login"
                :model="user"
                :rules="passwordLoginRules"
                :label-width="0">
          <div class="login-center-input">
            <FormItem prop="user">
              <div class="form-float-input-box">
                <Input type="text"
                       v-model="user.user"/>
                <div :class="['login-input-label', user.user ? 'show-label' : '']">手机号/邮箱</div>
              </div>
              <div class="description"><a href="javascript:">忘记账号？</a></div>
            </FormItem>

          </div>
          <div class="login-center-input">
            <FormItem prop="password">
              <div class="form-float-input-box">
                <Input type="password"
                       password
                       v-model="user.password"/>
                <div :class="['login-input-label', user.password ? 'show-label' : '']">密码</div>
              </div>
              <div class="description">忘记密码？<a href="javascript:">使用短信验证登录</a></div>
            </FormItem>
          </div>

          <footer>
            <a href="javascript:">扫码登录</a>
            <div :class="['login-button',loginLoading ? 'disable' : '']"
                 @click="login">
              {{ loginLoading ? '登录中' : '登录' }}
            </div>
          </footer>
        </i-form>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        loginLoading: false,
        user: {
          type: 'password',
          user: '',
          password: ''
        },
        passwordLoginRules: {
          user: [
            {
              required: true,
              message: '用户不能为空',
              trigger: 'blur'
            },
            {
              message: '请输入正确的手机号或电子邮箱',
              pattern: /(^1[0-9]{10}$|^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$)/,
              trigger: 'change'
            }
          ],
          password: [
            {
              required: true,
              message: '密码不能为空',
              trigger: 'blur'
            },
            {
              message: '请输入 8~18 大小写字母、_-%@$符号组成的字符串',
              pattern: /^[a-zA-Z_\-%@$]{8,18}$/,
              trigger: 'change'
            }
          ]
        },
        currentInput: 'null'
      }
    },
    methods: {
      login() {
        this.loginLoading = true
        let loginData = JSON.parse(JSON.stringify(this.user))

        this.$axRequest({
          url: 'login',
          method: 'post',
          data: loginData,
          success: (response) => {
            this.$Message.success(response.data.msg)
            this.loginLoading = false
            this.$store.dispatch('manage/login', response.data.data)
            setTimeout(() => {
              this.$router.push('/')
            }, 300)
          },
          error: (response) => {
            this.loginLoading = false
            this.$Message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .showInputLabel() {
    top: -6px;
    z-index: 12;
    font-size: 13px;
    background-color: #ffffff;
    padding: 0 5px;
  }

  body {
    background-color: @baseBg;
  }

  #page-login {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;

    .content {
      width: 450px;
      margin: 0 auto 40px auto;
      border-radius: 8px;
      border: 1px solid #dadce0;
      transition: .2s;
      padding: 40px;
      background-color: @whiteColor;

      header {
        & > * {
          display: flex;
          justify-content: center;
          margin: 0 0 24px 0;
          padding: 0;
        }

        img {
          height: 24px;
          width: auto;
        }

        h1 {
          color: #202124;
          font-family: 'Google Sans', 'Noto Sans Myanmar UI', arial, sans-serif;
          font-size: 24px;
          font-weight: 400;
          line-height: 1.3333;
          margin-bottom: 9px;
        }

        .description {
          color: #202124;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: .1px;
          line-height: 1.5;
        }
      }

      .login-center-input {
        margin-bottom: 23px;

        .form-float-input-box {
          position: relative;
          height: 56px;

          input {
            border: 1px solid #dadce0;
            height: 56px;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
            padding: 0 16px;
            font-size: 16px;
            font-weight: 400;
            z-index: 10;
            position: absolute;
            background: none;

            &:focus {
              border: 2px solid #009688;
            }
          }

          .login-input-label {
            position: absolute;
            color: #80868b;
            font-size: 16px;
            font-weight: 400;
            top: 20px;
            left: 16px;
            z-index: 2;
            line-height: 1;
            transition: all 0.3s;
            -moz-transition: all 0.3s; /* Firefox 4 */
            -webkit-transition: all 0.3s; /* Safari 和 Chrome */
            -o-transition: all 0.3s; /* Opera */

            &.show-label {
              .showInputLabel();
            }
          }
        }

        .description {
          padding-bottom: 3px;
          padding-top: 12px;
          color: #5f6368;
          font-size: 15px;
          line-height: 1.4286;
          font-weight: 500;

          a {
            color: #009688;
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }

      footer {
        display: flex;
        justify-content: space-between;

        a {
          font-weight: 500;
          color: #009688;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        .login-button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 88px;
          height: 36px;
          background-color: #009688;
          color: #ffffff;
          cursor: pointer;
          border-radius: 3px;
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
  }


  // 原样式覆盖
  .ivu-input-wrapper {
    display: block !important;
  }

  .ivu-form-item {
    margin-bottom: 10px !important;

    &.ivu-form-item-error {
      .ivu-form-item-error-tip {
        top: 64px !important;
      }

      .description a, .description {
        color: @lightBg !important;
      }

      input, input:focus {
        border: 2px solid #fa541c !important;
      }
    }

    .ivu-input-prefix i, .ivu-input-suffix i {
      font-size: 25px;
      line-height: 56px;
      right: 7px;
      position: absolute;
      cursor: pointer;
    }

    .ivu-input-prefix, .ivu-input-suffix {
      z-index: 11
    }
  }
</style>